<template>
  <div class="login-page">
    <div class="videoContainer">
      <video
        class="fullscreenVideo"
        playsinline
        autoplay
        muted
        loop
        style="width: 100%; height: 100%; object-fit: fill"
      >
        <source
          src="https://slwl-admin.itheima.net/static/media/video.3cf57b17.mp4"
          type="video/mp4"
        />
      </video>
    </div>
    <el-card>
      <div class="header">
        <img
          src="https://slwl-admin.itheima.net/static/img/logo1.33ef7fa0.png"
        />
      </div>
      <el-form ref="loginForm" :model="login" :rules="rules">
        <el-form-item prop="userword">
          <el-input v-model="login.userword" placeholder="账号">
            <i slot="prefix" class="iconfont icon-ren" />
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="login.password"
            placeholder="密码"
            :show-password="true"
          >
            <i slot="prefix" class="iconfont icon-suo" />
          </el-input>
        </el-form-item>
        <el-form-item prop="yanzheng" class="haveimg">
          <el-input v-model="login.yanzheng" placeholder="验证码">
            <i slot="prefix" class="iconfont icon-yanzheng" />
          </el-input>
          <img :src="picUrl" @click="pic" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="toLogin">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { loginApi, menu, yanzheng } from "@/api/login";
import { generateMixed } from "@/utils/suijishu";

export default {
  name: "Login",
  props: {},
  data() {
    return {
      login: {
        userword: "shenlingadmin",
        password: "123456",
        yanzheng: "",
      },
      rules: {
        userword: [{ required: true, message: "不能为空", trigger: "blur" }],
        password: [{ required: true, message: "不能为空", trigger: "blur" }],
        yanzheng: [{ required: true, message: "不能为空", trigger: "blur" }],
      },
      picUrl: "",
      key: "",
    };
  },
  created() {
    this.pic();
  },
  mounted() {},
  methods: {
    async pic() {
      this.key = generateMixed(37);
      this.picUrl = await yanzheng(this.key);
    },
    async toLogin() {
      await this.$refs.loginForm.validate();
      try {
        const res = await loginApi({
          account: this.login.userword,
          password: this.login.password,
          code: this.login.yanzheng,
          key: this.key,
        });
        // console.log(res)
        if (res.msg !== "ok") {
          this.$message.error(res.msg);
          await this.pic();
          return;
        }
        this.$store.commit("login/setToken", res.data.token.token);
        this.$store.commit("login/setUserInfo", res.data.user);
        const aaa = await menu();
        console.log(aaa.data);
        // localStorage.setItem("sl-menu", JSON.stringify(aaa.data));
        this.$router.push("./");
      } catch (e) {
        console.log(e);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.login-page {
  display: flex;
  height: 100vh;
  .videoContainer {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -100;
  }

  .videoContainer:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    z-index: -1;
    top: 0;
    left: 0;
    background: rgba(25, 29, 34, 0.65);
  }
  .el-card {
    margin: auto;
    width: 450px;
    height: 467px;
    padding: 36px 40px;
    border-radius: 10px;
    ::v-deep.el-card__body {
      padding: 0;
    }
    .header {
      height: 58px;
      margin-bottom: 28px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0;
      img {
        width: 195px;
        height: 54px;
      }
    }
    .el-button {
      width: 100%;
      height: 54px;
      padding: 12px 20px;
      margin: 22px 0 14px 0;
    }
    ::v-deep .el-input__inner {
      padding-left: 45px;
      height: 50px;
      line-height: 50px;
    }
    ::v-deep.el-input__prefix {
      line-height: 50px;
    }
    ::v-deep.el-input__icon {
      line-height: 54px;
      font-size: 20px;
      padding-left: 12px;
      padding-right: 26px;
    }
    .iconfont {
      font-size: 18px;
      margin-left: 10px;
    }
    .haveimg {
      position: relative;
      img {
        position: absolute;
        right: 10px;
        top: 9px;
        width: 71px;
        height: 32px;
      }
    }
  }
}
</style>
